﻿
@*
    For more information on enabling MVC for empty projects, visit http://go.microsoft.com/fwlink/?LinkID=397860
*@
寝室列表页
<div>
    <button id="addBedRoom" class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#addBedRoomModel" aria-controls="offcanvasWithBothOptions">添加</button>
</div>


@*表格*@
<table id="bedRoomTable" class="table table-bordered table-hover">
    <thead>
        <tr>
        </tr>
    </thead>
    <tbody>
    </tbody>
</table>



@*添加对话框*@
<div class="offcanvas offcanvas-bottom" data-bs-scroll="true" data-bs-backdrop="false" tabindex="-1" id="addBedRoomModel" aria-labelledby="offcanvasScrollingLabel">
    <div class="offcanvas-header">
        <h5 class="offcanvas-title" id="offcanvasScrollingLabel">添加寝室</h5>
        <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
    </div>
    <div class="offcanvas-body">
        <div class="container text-center">
            <div class="row">

                @*第一列*@
                <div class="col-sm-12 col-md-6 col-lg-3">

                </div>
                @*第二列*@
                <div class="col-sm-12 col-md-6 col-lg-3">

                    <div class="input-group input-group-sm mb-2">
                        <span class="input-group-text" id="basic-addon3">寝室名称</span>
                        <input type="text" id="bedRoomName" class="form-control" aria-describedby="basic-addon1">
                    </div>
                    <div class="input-group input-group-sm mb-2">
                        <span class="input-group-text" id="basic-addon5">寝室类别</span>
                        <select id="category" class="form-select form-select-sm" aria-label="">
                            <option value="1">男寝</option>
                            <option value="0">女寝</option>
                        </select>

                    </div>
                </div>
                @*第三列*@
                <div class="col-sm-12 col-md-6 col-lg-3">
                    <div class="input-group input-group-sm mb-2">
                        <span class="input-group-text" id="basic-addon4">床位数</span>
                        <input type="text" id="bedNum" class="form-control" aria-describedby="basic-addon1">
                    </div>


                    <div class="input-group input-group-sm mb-2">
                        <span class="input-group-text" id="basic-addon6">备注</span>
                        <input type="text" class="form-control" id="members" aria-describedby="basic-addon1">
                    </div>
                    <div class="modal-footer form-control-sm">
                        <button type="button" class="btn btn-primary btn-sm" id="submitAdd">保存</button>
                        <button type="button" class="btn btn-secondary btn-sm" id="clearBedRoom" data-bs-dismiss="modal">清空</button>
                    </div>
                </div>
               
               

            </div>
        </div>
    </div>
</div>

@*消息框*@
<div class="toast-container position-fixed top-0 start-50 p-3">
    <div id="liveToast" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
        <div class="toast-header">
            <strong class="me-auto">消息</strong>
            <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
        </div>
        <div class="toast-body" id="message">
        </div>
    </div>
</div>


@section Scripts{
    <script>
        loadpage()
        let g_rows

        function loadpage() {
            let s = sessionStorage.getItem('bedRoomlist')

            if (s == [] || s == "" || s == null) {
                $.ajax({
                    url: '/BedRoom/GetBedRoomList',
                    type: 'get',
                    success: function (data) {
                        parseData(data)
                    },
                    error: function (err) {
                    }
                })
            } else {
                parseStorage(s)
            }

        }

        //解析请求数据并渲染到页面
        function parseData(data) {
            $('#bedRoomTable thead tr').empty()
            $('#bedRoomTable tbody tr').empty()
            let jsd = JSON.stringify(data)

            let head = JSON.parse(data.attr)
            head.push('操作')
            sessionStorage.setItem('bedRoomlist_head', JSON.stringify(head))

            //渲染表头
            for (index in head) {
                $('#bedRoomTable thead tr').append('<th>' + head[index] + '</th>')
            }

            let rows = JSON.parse(data.row)
            $(rows).each(function(index,ele){
                ele.Category = ele.Category == 1 ? '男' : '女'
            })
            g_rows = rows
            sessionStorage.setItem('bedRoomlist', JSON.stringify(rows))

            //渲染表格
            $(rows).each(function (index, ele) {
                $('#bedRoomTable tbody').append('<tr></tr>')
                for (key in ele) {
                    $('#bedRoomTable tbody tr:last').append('<td>' + ele[key] + '</>')
                }

                $('#bedRoomTable tbody tr:last').append('<td>' +
                    '<button class="editBtn" onclick="edit(this)" data-bs-toggle="offcanvas" data-bs-target="#editBedRoom">编辑</button>' +
                    '<button class="delBtn" onclick="del(this)" data-bs-toggle="modal" data-bs-target="#sureDel">删除</button>' +
                    '</td>')
                $('#bedRoomTable tbody tr td:last').attr({ 'bedRoomid': ele.BedRoomId })
            })

            $('.delBtn').addClass("btn btn-danger btn-sm")
            $('.editBtn').addClass("btn btn-primary btn-sm")
        }

        //解析缓存并加载到表格
        function parseStorage(data) {
            $('#bedRoomTable thead tr').empty()
            $('#bedRoomTable tbody tr').empty()
            let headStorage = sessionStorage.getItem('bedRoomlist_head')
            let head = JSON.parse(headStorage)
            //渲染表头
            for (index in head) {
                $('#bedRoomTable thead tr').append('<th>' + head[index] + '</th>')
            }

            //渲染表格
            let rows = JSON.parse(data)
            $(rows).each(function (index, ele) {
                $('#bedRoomTable tbody').append('<tr></tr>')
                for (key in ele) {
                    $('#bedRoomTable tbody tr:last').append('<td>' + ele[key] + '</>')
                }
                $('#bedRoomTable tbody tr:last').append('<td>' +
                    '<button class="editBtn" data-bs-toggle="offcanvas" data-bs-target="#editBedRoom">编辑</button>' +
                    '<button class="delBtn" data-bs-toggle="modal" data-bs-target="#sureDel">删除</button>' +
                    '</td>')
                $('#bedRoomTable tbody tr td:last').attr({ 'bedRoomid': ele.BedRoomId })
            })

            $('.delBtn').addClass("btn btn-danger btn-sm")
            $('.editBtn').addClass("btn btn-primary btn-sm")
        }


        //刷新数据
        function refreshData() {
            $('#bedRoomTable thead tr').empty()
            $('#bedRoomTable tbody tr').empty()

            $.ajax({
                url: '/BedRoom/GetBedRoomList',
                type: 'get',
                success: function (data) {
                    parseData(data)
                },
                error: function (err) {
                }
            })
           

        }


        const toastLiveExample = document.getElementById('liveToast')
        const toast = new bootstrap.Toast(toastLiveExample)
        //提交添加
        $('#submitAdd').click(function () {
            let BedRoomName = $('#bedRoomName').val()
            let Category = $('#category').val()
            let BedNum = $('#bedNum').val()
            let Members = $('#members').val()
            if (bedRoomName == '' || bedRoomName == null) {

                $('#message').text('名称不能为空!')
                toast.show()
                return
            }

            $.ajax({
                url: '/BedRoom/AddBedRoom',
                type: 'post',
                data: {
                    BedRoomName,
                    Category,
                    BedNum,
                    Members
                },
                success: function (data) {
                    if (data == '1') {
                        $('#message').text('添加成功!')
                        toast.show()
                        refreshData()
                    }
                    if (data == '-1') {
                        $('#message').text('名称已存在!')
                        toast.show()
                    }
                },
                error: function (err) {
                }
            })
        })

        //清空按钮
        $('#clearBedRoom').click(function () {
            $('#bedRoomName').val('')
            $('#bedNum').val('')
            $('#members').val('')
        })

    </script>
}